<template>
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title" style="background-color: white;">条件搜索</h2>
            <div class="layui-colla-content layui-show" style="border: none;">
                <form class="layui-form" style="padding: 5px;">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nick" placeholder="请输入" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-left: 55px">
                        <button lay-submit lay-filter="search" class="layui-btn layui-btn-normal"><i
                                class="layui-icon layui-icon-search"></i>筛选</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <table id="dataTable" lay-filter="dataTable"></table>
</template>
<script type="text/html" id="actionTpl">
    <button lay-event="form" lay-area="['60%', '80%']" data-id="{{d.id}}"
            class="layui-btn layui-btn-xs layui-btn-primary">修改
    </button>
    <button lay-event="del" lay-url="/system/systemUser/del" data-id="{{d.id}}"
            class="layui-btn layui-btn-xs layui-btn-danger">
        删除
    </button>
</script>

<script type="text/html" id="toolbarTpl">
    <button type="button" class="layui-btn layui-btn-normal" data-id="0" data-id="{{d.id}}"
                lay-area="['60%', '80%']" lay-event="form">
            添加用户
        </button>
</script>

<script>
    layui.use(['app', 'table', 'jquery'], function () {
        const { app, table, jquery: $} = layui;
        app({
            
            afterRender: function () {
                const that = this;
                //表格动态加载
                table.render({
                    toolbar: "#toolbarTpl",
                    url: "/system/user/index?" + $.param(that.param),
                    cols: [[ //表头
                        { title: '用户名', width: 200, field: 'username' }
                        , { title: '昵称', width: 150, field: 'nick' }
                        , { title: '创建时间', width: 200, templet: '<div>{{layui.util.toDateString(d.create_time * 1000)}}</div>' }
                        , { title: '操作', width: 200, templet: '#actionTpl' }
                    ]]
                });
            }
        })
    });

</script>